import React, { Component } from "react";
import Detail from "../Detail";
import { Link, Route } from "react-router-dom";
export default class Message extends Component {
  state = {
    arr: [
      { id: 1, name: "yueyue1" },
      { id: 2, name: "yueyue2" },
      { id: 3, name: "yueyue3" },
    ],
  };

  showReplace = (id, name) => {
    // search传参
    this.props.history.replace(`/home/message/detail?id=${id}&name=${name}`);
    // params传参
    // this.props.history.replace(`/home/message/detail/${id}/${name}`);
    // state传参
    //this.props.history.replace("/home/message/detail", { id, name });
  };

  showPush = (id, name) => {
    this.props.history.push(`/home/message/detail?id=${id}&name=${name}`);
  };

  render() {
    const { arr } = this.state;
    return (
      <div>
        <h4>this is Message</h4>
        <ul>
          {arr.map((item) => {
            return (
              <li key={item.id}>
                {/* <Link to={`/home/message/detail/${item.id}/${item.name}`}>{item.name}</Link> */}
                {/* <Link to={`/home/message/detail?id=${item.id}&name=${item.name}`}>{item.name}</Link> */}
                <Link
                  replace
                  to={{
                    pathname: "/home/message/detail",
                    state: { id: item.id, name: item.name },
                  }}
                >
                  {item.name}
                </Link>
                &nbsp;
                <button
                  onClick={() => {
                    this.showPush(item.id, item.name);
                  }}
                >
                  push 跳转
                </button>
                &nbsp;
                <button
                  onClick={() => {
                    this.showReplace(item.id, item.name);
                  }}
                >
                  replace 跳转
                </button>
              </li>
            );
          })}
        </ul>
        {/* <Route path="/home/message/detail/:id/:name" component={Detail}></Route> */}
        {/* <Route path="/home/message/detail" component={Detail}></Route> */}
        <Route path="/home/message/detail" component={Detail}></Route>
      </div>
    );
  }
}
